<template>
	<view class="wrapper_All" >
		<!--  -->
		<view class="allEmpty" style="height: calc(100vh)" v-if="!signState || !isPageState">
			<image src="@/static/images/index/empty1.png" mode=""></image>
			<view class="">{{!signState || !isPageState?'~您尚未参与考勤~':'~您所在机构暂无参与考勤人员~'}}</view>
		</view>
		<view class="wrapper_total" :style="{display:!signState || !isPageState?'none':'unset'}" >
			<!-- 日历筛选 -->
			<view class="topTitle">
				<view class="roleBox">
					<view class="roleCard">
						{{ findRoute('mystatistics_sign_switch')?(signData.title || userinfo.deptNames[0] || ''): (signData.title || userinfo.nick_name)+'-统计'}}
						<text v-if="findRoute('mystatistics_sign_switch')">(统计人数:{{ initUserIDs.length }})</text>
					</view>
					<view @click="tabClick(1)" class="changeBtn" v-if="findRoute('mystatistics_sign_switch') || signData.title" >
						<image src="@/static/images/index/change.svg" mode="" ></image>
						<view class="">切换</view>
					</view>
					<view @click="tabClick(2)" class="changeBtn" v-else-if="!findRoute('mystatistics_sign_switch') || !signData.title" >
						<image src="@/static/images/repairFitting/signMonth.png" mode=""></image>
						<view class="" >打卡月历</view>
					</view>
				</view>
				<view class="weekDate">
					<view v-if="findRoute('mystatistics_sign_switch') && singleUserState" :class="dateCurr === 1?'act':''" @click="bindFilter('days',1)">
						日
					</view>
					<view :class="dateCurr === 2?'act':''" @click="bindFilter('weeks',2)">周</view>
					<view :class="dateCurr === 3?'act':''" @click="bindFilter('months',3)">月</view>
				</view>
				<view class="tabDate">
					<view class="down" @click="tabNext(-1)"><text></text></view>
					<view class="dates" @tap.stop="toggle('bottom')">
					{{dateSelect || '2020/08/22'}}
					<text v-if="curText != 4">{{dataText[curText-1]}}</text>
					</view>
					<view class="next" @click="tabNext(1)"><text></text></view>
				</view>
			</view>
			<view class="dateEmpty" v-if="(!findRoute('mystatistics_sign_switch')|| dateCurr > 1 || !singleUserState ) && (curText === 2 || curText === 3) ">
				{{['-本周考勤尚未结束-','-本月考勤尚未结束-'][dateCurr-2]}}
				
			</view>
			<view class="dateRest" v-if="findRoute('mystatistics_sign_switch') && restDayObj.holiday === 1 && dateCurr === 1 ">
				<view class="reset_up">
					<image src="/static/images/repairFitting/restDay.png" ></image>
					<text>~ 休息日 ~</text>
				</view>
				<view class="reset_down">
					<text class="down_one">{{objSignData.counts || 0}} <text>人</text></text>
					<text class="down_two">加班</text>
				</view>
			</view>
			
			<!-- 考勤仪表盘 -->
			<view class="workPerson" v-if="findRoute('mystatistics_sign_switch') && dateCurr === 1 && restDayObj.holiday !== 1 ">
				<view class="attendants" @click.stop="toAttendants(1)">
					<text>出勤人员</text>
					<text></text>
				</view>
				<view class="w-Person">
 
					<view class="titData">
						<view class="tit_left">
							<text>已出勤</text>
							<text>{{objSignData.workUserCount || 0}}</text>
							<text>人</text>
						</view>
						
						<view class="tit_lines"></view>
						<view class="tit_right">
							<text>参与考勤</text>
							<text>{{objSignData.planUserCount || 0}}</text>
							<text>人</text>
						</view>
					</view>
				</view>
				<view class="workdata" style="margin-top: -130rpx;">
					<view class="items itemsPlus" v-for="(item,i) in signDataArrFour" :key="i">
						<text>{{item.titleTo}} <text style="font-size: 26rpx;font-weight: 400;color: #333; margin-left:8rpx">人</text> </text>
						<text>{{item.title}}</text>
						<view class="lines" v-if="i !== signDataArrFour.length-1"></view>
					</view>
				</view>
				
			</view>
			<!-- 考勤统计 周月 -->
			<view class="workdata" v-if="findRoute('mystatistics_sign_switch') && dateCurr !== 1 && singleUserState">
				<view class="items itemsWeek" v-for="(item,i) in signDataArrThree" :key="i">
					<text>{{item.titleTo}}<text style="font-size: 26rpx;font-weight: 400;color: #333;margin-left:8rpx">次</text></text>
					<text>{{item.title}}</text>
					<view class="lines" style="width: 236rpx;" v-if="i !== 2 && i !== 5" ></view>
				</view>
			</view>
			<!-- 考勤统计 日 -->
			<view class="workdata" v-if="!findRoute('mystatistics_sign_switch') || !singleUserState">
				<view class="items itemsDay" v-for="(item,i) in signDataArr" :key="i">
					<text>{{item.count}}<text style="font-size: 26rpx;font-weight: 400;color: #333;margin-left:8rpx">{{item.texts}}</text></text>
					<text>{{item.name}}</text>
					<view class="lines" style="width: 178rpx;" v-if="i !== 3 && i !== 7"></view>
				</view>
				
			</view>
			<!-- 考勤明细 -->
			<view class="signInfo">
				<view class="info_title" >考勤明细</view>
				<view class="info_select" v-if="findRoute('mystatistics_sign_switch') && singleGroupState">
					<view :class="acts === 1 ?'sGround acts':'sGround'" @click="groundClick(1)">按组</view>
					<view :class="acts === 2 ?'sGround acts':'sGround'" @click="groundClick(2)">按人</view>
				</view>
				<view class="collapses">
					<uni-collapse ref="collapse" v-if="!findRoute('mystatistics_sign_switch') || !singleUserState" @change="handCollapse" >
						<block v-for="(item,i) in signDataArrTo" :key="i" >
							<uni-collapse-item :isSignStyle="true" :show-animation="false" v-if="item.signArr.length > 0" :title-border="i == signDataArrTo.length-1 ?'none':'show'" >
								<template v-slot:title>
									<view class="collTitle" :style="{'font-weight':isStateArr.includes(i+1)?'700':'400'}">
										<view v-if="item.signArr.length > 0">
											<text></text>
											<text >{{item.title}}</text>
										</view>
										<view v-else >
											<text style="border:2rpx solid #999"></text>
											<text style="color:#999">{{item.title}}</text>
										</view>
										<view class="" :style="{color:item.signArr.length > 0?'':'#999'}">
											 {{item.titleCount?item.titleCount+'次':'0次'}}
											{{item.titleTo?"("+item.titleTo+")":""}}
										</view>
									</view>
								</template>
								<view class="content" >
									<view class="contents" v-for="(pro,c) in item.signArr" :key="c">
										<view class="text">{{pro.date || ""}}</view>
										<view class="text">{{pro.msg || ""}}</view>
									</view>
									
								</view>
							</uni-collapse-item>
							<uni-collapse-item :isSignStyle="true" :show-animation="false" v-else :disabled="true" :title-border="i == signDataArrTo.length-1 ?'none':'show'" >
								<template v-slot:title>
									<view class="collTitle">
										<view >
											<text style="border:2rpx solid #999"></text>
											<text style="color:#999">{{item.title}}</text>
										</view>
										<view class="">
											<text style="color:#999;">
											{{item.signArr.length+'次'}}
											</text>
										</view>
									</view>
								</template>
							</uni-collapse-item>
						</block>
						
					</uni-collapse>
					<!-- 按组按人组件 -->
					<view class="" v-if="findRoute('mystatistics_sign_switch') && singleUserState">
						<tree-NodesSign
						:tree="signTreeData" 
						:dayStatus="dateCurr === 1 ? 2 : 1"
						:arrLen="signTreeData.length-1"
						:isHeight="true"
						:acts="acts"
						:lastStr="signTreeData[signTreeData.length-1] ? signTreeData[signTreeData.length-1].signTypeName : ''"
						:expandedIds="expandedIds" 
						@node-click="nodeClick"
						/>
						<view style="height: 200rpx; font-size:26rpx;color: #999; text-align:center;line-height: 200rpx;" v-if="signTreeData.length <= 0">
							暂无数据
						</view>
					</view>
				</view>	
			</view>
			<!-- 考勤明细end -->
			
			<!-- 出勤table -->
			<block v-if="singleGroupState && findRoute('mystatistics_sign_switch')">
			<view class="ranking" v-if="(findRoute('mystatistics_sign_switch') && dateCurr === 1 && restDayObj.holiday !== 1) ">
				<view class="ranking_title">出勤排行</view>
				<view class="ranking_content">
					<view class="r-table">
						<view class="r-th">
							<view class="th"></view>
							<view class="th">组名</view>
							<view class="th">出勤比</view>
							<view class="th">出勤率</view>
						</view>
						<view class="r-tr" v-for="(item,i) in workRateListsArr" :key="i" @click.stop="toAttendants(2,item)">
							<view class="td">
						 
							</view>
							<view class="td">{{item.deptName}}</view>
							<view class="td">{{item.msg}}</view>
							<view class="td">{{item.workRate+"%"}}</view>
						</view>
						<view class="td_Empty" v-if="!workRateListsArr || workRateListsArr.length <= 0" >
							<view class="">
								暂无数据
							</view>
						</view>
					</view>
					<view class="r-more" @click="moreOpen(1)" v-if="openState === 1 && workRateListsArr && workRateListsArr.length > 0 && workRateListsArrState " >
						<image src="/static/images/repairFitting/arrowTo.png"></image>
						向下展开
					</view>
					<view class="r-more" @click="moreOpen(2)" v-if="openState === 2 && workRateListsArr && workRateListsArr.length > 0 && workRateListsArrState">
						<image src="/static/images/repairFitting/downdown.png"></image>
						向上收起
					</view>
				</view>
				
			</view>
			</block>
			<view style="height: 50rpx;"></view>
			<!-- 日历 日周月组件 -->
			<weekYearDate
			 ref="weekYear"
			 :dateCurr="dateCurr"
			 :showState="showState"
			 @selectChange="selectChange"
			 @bindClose="bindClose"
			 />
			 <!-- 出勤人员组件 -->
			<signUsers
			  ref="singUs"
			  :listObj="Object.keys(listObjRan).length > 0?listObjRan:listObj"
			  @handClose="handClose"
			  />
			
		</view>
	</view>
	
</template>

<script> 
import weekYearDate from '@/components/weekYearDate/weekYearDate.vue';
import signUsers from '@/components/weekYearDate/signUsers.vue';
import treeNodesSign from '@/components/member-tree/tree-nodesSign.vue';
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
import {
	getUserSignDetail,
	getGroundSignDetail,
	getGroundWeekSignDetail,
	getRestDayDetail,
	getRestDayTotal,
	getWorkUserList
} from '@/apis/statisticalTotal.js';
import {getSignDeptTree} from '@/apis/statisticalTotal.js';
import {getSiginDetail } from '@/apis/system.js';
import { mapState } from 'vuex';
import {
	hanleToken
} from '@/utils/utils.js';
import dayjs from 'dayjs';
import {formatTime,formatSeconds} from '@/utils/utils.js';
import {delRepeat} from '@/utils/tools.js';
	
export default {
	components:{
		// qiunDataCharts,
		weekYearDate,
		treeNodesSign,
		signUsers,
		uniCollapse,
		uniCollapseItem
	},
	data() {
		return {
			signState:true,// 是否加入考勤组
				
			acts:1,
			loading:true,
			types:true,
				
			dateCurr:3,// 日期切换下标
			showState:false,// 日期弹窗
			dateSelect:dayjs(new Date()).format('YYYY/MM/DD'),// 日期展示
				
			weeksLists:[],// 周数据
			weeksinde:null,// 周数
			// {role_name:'maintenance'}
			userinfo:  hanleToken('get','userData'),
			expandedIds:[],
			objSignData:{},// 周月数据
			signTreeData:[],// 按组按人树形数据
			restDayObj:{},// 休息日数据
			dataText:['今日','本周','本月'],
			curText:1,// 当前日周月
			signData:{},// 选择人缓存数据
			workRateListsArr:[],// 出勤排行数据
			workRateListsArrState:true,// 出勤排行状态
			workRateListsArrTwo:[],// 出勤排行数据
			openState:1,// 出勤排版展开收起状态
			deptIdArr:'',// 登入人的部门id
			isPageState:true,// 机构页状态
			resultArrAll:[],// 全部在职人员
			singleGroupState:true,// 维保组长切换单组状态
			singleUserState:true,// 维保组长切换单人状态
			listObj:{},// 出勤人员
			listObjRan:{},// 出勤排行榜人员
			signDataArr:[
				{name:'迟到',count:0,type:'beLateCount',texts:'次'},
				{name:'早退',count:0,type:'leaveEarlyCount',texts:'次'},
				{name:'定位异常',count:0,type:'locateAbnormalCount',texts:'次'},
				{name:'补卡',count:0,type:'newSignCounts',texts:'次'},
				{name:'缺卡',count:0,type:'noSignCounts',texts:'次'},
				{name:'加班',count:0,type:'workOverCounts',texts:'次'},
				{name:'实际出勤天数',count:0,type:'workDays',texts:'天'},
				{name:'休息天数',count:0,type:'noWorkDays',texts:'天'},
			],
			signDataArrTo:[
				// ['leaveEarlyCount','newSignCounts','noSignCounts']
				{title:'迟到',titleTo:'',type:'beLateDetails',signArr:[],have:'beLateCount',titleCount:'',haveTwo:'beLateMinute',},
				{title:'早退',titleTo:'',type:'leaveEarlyDetails',signArr:[],have:'leaveEarlyCount',titleCount:'',haveTwo:'leaveEarlyMinute'},
				{title:'定位异常',titleTo:'',type:'locateAbnormalDetails',signArr:[],have:'locateAbnormalCount',titleCount:''},
				{title:'补卡',titleTo:'',type:'newSignDetails',signArr:[],have:'newSignCounts',titleCount:''},
				{title:'缺卡',titleTo:'',type:'noSignDetails',signArr:[],have:'noSignCounts',titleCount:''},
				{title:'加班',titleTo:'',type:'workOverDetails',signArr:[],have:'workOverCounts',titleCount:'',haveTwo:'workOverHours'},
			],
			signDataArrThree:[
				{title:'迟到',titleTo:'',type:'beLateCount',signArr:[]},
				{title:'早退',titleTo:'',type:'leaveEarlyCount',signArr:[]},
				{title:'定位异常',titleTo:'',type:'locateAbnormalCount',signArr:[]},
				{title:'补卡',titleTo:'',type:'newSignCounts',signArr:[]},
				{title:'缺卡',titleTo:'',type:'noSignCounts',signArr:[]},
				{title:'加班',titleTo:'',type:'workOverCounts',signArr:[]},
			],
			signDataArrFour:[
				{title:'迟到',titleTo:'',type:'beLateCount'},
				{title:'早退',titleTo:'',type:'leaveEarlyCount'},
				{title:'定位异常',titleTo:'',type:'locateAbnormalCount'},
				{title:'补卡',titleTo:'',type:'newSignCounts'},
				// {title:"缺卡",titleTo:"",type:"noSignCounts},
				// {title:"加班",titleTo:"",type:"workOverCounts",signArr:[]},
			],
				
			initUserIDs:[],//
			isStateArr:[],
			d1: {
				colors: ['#47C8A3', '#61D341', '#9DD44A', '#B3E557', '#DDF474', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				chartData: { series: [] },
				opts: {
					// padding: undefined,
					title: {
						  name: '',
						  fontSize: 12,
						  color: '#0091ff'
					},
					subtitle: {
						  name: '',
						  fontSize: 10,
						  color: '#dcf0ff'
					},
					extra: {
						  arcbar: {
							type: 'circle',
							width: 5,
							backgroundColor: '#dcf0ff',
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2,
							lineCap: 'butt'
						  }
					}
				},
				title: '',
				subtitle: ''
			},
			d2:{
				color: ['#1890FF','#91CB74','#FAC858','#EE6666','#73C0DE','#3CA272','#FC8452','#9A60B4','#ea7ccc'],
				chartData: { series: [] },
				opts:{
					// padding: undefined,
					title: {
						  name: '',
						  fontSize: 12,
					},
					subtitle: {
						  name: '',
						  fontSize: 10,
					},
					extra: {
						  arcbar: {
							type: 'default',
							width: 12,
							backgroundColor: '#dcf0ff',
							startAngle: 0.99,
							endAngle: 0.02,
							gap: 2,
							// radius:100,
							lineCap: 'custom'
						  }
					}
				}
					
			}
			
		};
	},
	computed:{
		// ...mapState('user', ['userinfo'])
	},
		
	async mounted() {
		this.deptIdArr = this.userinfo.dept_id ? this.userinfo.dept_id.split(',')[0] : '';
		// 维保组长获取全部在职人员判断机构页
		if (this.findRoute('mystatistics_sign_switch')) {
			let resultArr = await this.initStorage() || [];
			console.log('初始',this.userinfo);
			this.resultArrAll = resultArr;
			if (resultArr.length <= 0) {
				// this.$store.commit("addSign",false)
				this.isPageState = false;
				return;
			}
		}
		// 维保员是否加入考勤
		if (!this.findRoute('mystatistics_sign_switch')) {
			let isState = true;
			try {
				isState = await this.initUser();
			} catch (e) {
				isState = false;
			}
			if (!isState) {
				this.signState = false;
				return;
			}
		}
			
		this.initData();
	},
		
	methods: {
		async initData() {
			let yearS = dayjs().year();
			let monthS = dayjs().month() + 1;
			let dayS = dayjs().date();
			let startDate = dayjs(yearS + '-' + monthS + '-' + dayS).startOf('month').format('YYYY-MM-DD HH:mm:ss');
			let endDate = dayjs(yearS + '-' + monthS + '-' + dayS).endOf('month') .format('YYYY-MM-DD HH:mm:ss');
				
			let objData = hanleToken('get','statisticalSign') || {};
			let allUserArr = '',allUserJob = '';
			if (Object.keys(objData).length > 0) {// 获取缓存数据
				this.signData = objData;
				if (objData.groupList) {
					this.initUserIDs = objData.id.split(',');
					// 只有一个组里面没有子组状态
					let groupListIs = objData.groupList;
					if (objData.groupList[0].isMore) {// 没有子组
						groupListIs = objData.groupList[0].children;
					}
					let singleGroups = groupListIs.some((item)=>item.children);
					this.singleGroupState = singleGroups;
					this.singleUserState = true;
				} else {
					this.initUserIDs = [objData.id];
					this.singleGroupState = false;
					this.singleUserState = false;
				}
				this.deptIdArr = objData.groupId;
				console.log('singleGroupState',this.singleGroupState,objData);
			} else {
				// allUserArr = await this.initStorage()
					
				if (this.resultArrAll.length > 0) {
					let allUser = this.resultArrAll.map(item=>item.id);
					allUser = delRepeat(allUser);
					this.initUserIDs = allUser;
					console.log('allUserArr',allUserArr,this.initUserIDs);
				}
			}
				
			// 维保员数据  singleUserState：切换人员为个人时切换维保页面展示
			if (!this.findRoute('mystatistics_sign_switch') || !this.singleUserState) {
				this.dateSelect = dayjs(new Date()).format('YYYY/MM');
				this.dateCurr = 3;
				this.curText = 3;
				this.singleGroupState = false;
				this.singleUserState = false;
				this.initUserData(startDate,endDate);
				return;
			}
			// 维保组长数据 maintenance_manager
			if (this.findRoute('mystatistics_sign_switch')) { 
				this.dateSelect = dayjs(new Date()).format('YYYY/MM/DD');
				this.dateCurr = 1;
				this.curText = 1;
				let startDateDay = '',endDateDay = ''; 
				if (this.dateCurr === 1) {
					startDateDay = dayjs().format('YYYY-MM-DD HH:mm:ss');
					endDateDay = dayjs().format('YYYY-MM-DD HH:mm:ss');
				}
				
				// this.initGroundData(startDate,endDate)
				let objs = await this.initRestDayDetail(dayjs().format('YYYY-MM-DD'),dayjs().format('YYYYMMDD')) || {};
				if (Object.keys(objs).length > 0) {
					if (objs.holiday !== 1) {// 判断不是休息日 加载数据
						this.initGroundDayData(startDateDay,endDateDay,objs.holiday);
					}
				}
			}
		},
		// 维保员是否加入考勤
		initUser() {
			return new Promise((resolve,reject)=>{
				getSiginDetail({
					date: dayjs().format('YYYYMMDD')
				}).then(res => {
					if (res.code === 200) {
						resolve(true);
					}
				}).catch(err=>{
					reject(false);
				});
			});
		},
		// 获取树形全部人员
		initStorage() {
			uni.showLoading({
				title:'加载中...',
				mask:true
			});
			return new Promise((resolve,reject)=>{
				getSignDeptTree().then(res => {
					console.log('initStorage',res,this.deptIdArr);
					if (res.code === 200) {
						uni.hideLoading();
						let arrTree =  res.data || [];
						let arr = [];
						let singleGroup = false;
						if (arrTree.length > 0 ) {
							if (arrTree.length === 1) {// 只有一个组不显示相关模块
								singleGroup = arrTree[0].children.some((item)=>item.children);
								this.singleGroupState = singleGroup;
							}
							arr = this.getUsersList([arrTree[0]],this);
						}
						resolve(arr);
					}
				}).catch(err=>{
					resolve([]);
				});
			});
		},
		// 获取最新的在职人员
		initJobUser(arr) {
			return new Promise((resolve,reject)=>{
				getWorkUserList(arr).then(res => {
					if (res.code === 200) {
						let arrTree =  res.data;
							
						resolve(arrTree);
					}
					console.log('initJobUser',res,arr);
				}).catch(err=>{
					resolve([]);
				});
			});
		},
			
		// 获取全部人员 //获取第一个部门里面的所有人
		getUsersList(deArr,that) {
			let arr = [];
			if (deArr && deArr.length > 0 ) {
				for (let i = 0; i < deArr.length; i++) {
					if (deArr[i].type == 2) {
						arr.push({...deArr[i]});
					} else { 
						if (deArr[i].children && deArr[i].children.length > 0) {
							arr = arr.concat(that.getUsersList(deArr[i].children,that));
						}
					}
				}
			} 
			return arr;
		},
		// 
		handCollapse(val) {
			this.isStateArr = val.map(Number);
		},
		// 按组按人
		groundClick(num) {
			this.acts = num;
			// this.expandedIds = []
			if (num === 1) {
				if (this.dateCurr === 1) {// 日 按组考勤明细树形数据
					this.signTreeData = this.objSignData.groupMap;
				} else {
					this.signTreeData = this.objSignData.groupList;
				}
				if (this.restDayObj.holiday === 1 && this.dateCurr === 1) {// 日 休息日按组考勤明细树形数据
					this.signTreeData = [this.objSignData.groupSign || {}];
				}
				// 今日工作日不显示缺卡数据
				if (this.restDayObj.holiday !== 1 && this.dateCurr === 1 && dayjs().format('YYYY/MM/DD') == dayjs(this.dateSelect).format('YYYY/MM/DD')) {
					let arrs = this.objSignData.groupMap || [];
					    arrs.forEach((item,i,arr)=>{
						   if (item.signTypeName == '缺卡') {
							   arr.splice(i,1);
						   }
					   });
					   arrs.forEach((item,i,arr)=>{
						   if (item.signTypeName == '加班') {
							   arr.splice(i,1);
						   }
					   });
					   this.signTreeData = arrs;
				}
			}
			if (num === 2) {
				if (this.dateCurr === 1) {// 日 按人考勤明细树形数据 
					this.signTreeData = this.objSignData.userMap;
				} else {
					this.signTreeData = this.objSignData.userList;
				}
				if (this.restDayObj.holiday === 1 && this.dateCurr === 1) {// 日 休息日按人考勤明细树形数据
					this.signTreeData = [this.objSignData.userSign || {}];
				}
				// 今日工作日不显示缺卡数据
				if (this.restDayObj.holiday !== 1 && this.dateCurr === 1 && dayjs().format('YYYY/MM/DD') == dayjs(this.dateSelect).format('YYYY/MM/DD')) {
					let arrw = this.objSignData.userMap || [];
					    arrw.forEach((item,i,arr)=>{
						   if (item.signTypeName == '缺卡') {
							   arr.splice(i,1);
						   }
					   });
					   arrw.forEach((item,i,arr)=>{
						   if (item.signTypeName == '加班') {
							   arr.splice(i,1);
						   }
					   });
					   this.signTreeData = arrw;
				}
			}
		},
		// 日期弹窗
		toggle(type) {
			console.log('日期弹窗',this.$refs.weekYear);
			this.showState = true;
			this.$refs.weekYear.$refs.popup.open();
		},
		bindClose() {
			this.$refs.weekYear.$refs.popup.close();
			this.showState = false;
		},
		// 出勤人员
		handClose() {
			this.$refs.singUs.$refs.popup.close();
		},
		// 出勤人员
		toAttendants(type,item) {
			let obj = {};
			if (type === 1) {
				let title = '';
				if (this.signData.title) {
					title = this.signData.title;
				} else if (this.userinfo.deptNames[0]) {
					title = this.userinfo.deptNames[0];
				}
				const {  workUserNames = [], planUserNames = [] } = this.listObj;

				obj = {
					title,
					workUserNames,
					planUserNames
				};
			}
			if (type === 2) {
				obj = {
					title:item.deptName,
					workUserNames:item.workUserNames || [],
					planUserNames:item.planUserNames || []
				};
			}
				
			this.listObjRan = obj;
			this.$refs.singUs.$refs.popup.open();
			// this.$forceUpdate()
		},
		// 日期选择
		async selectChange(val) {
			console.log('日期选择日期选择',val);
			this.dateSelect = val;
			this.acts = 1;// 默认考勤明细按组显示
			let startDates = '',endDates = '';
			this.curText = 4;// 4为空的标记
			if (this.dateCurr === 1) {
				startDates = dayjs(val).startOf('date').format('YYYY-MM-DD HH:mm:ss');
				endDates = dayjs(val).endOf('date').format('YYYY-MM-DD HH:mm:ss');
				if (dayjs().format('YYYY/MM/DD') == dayjs(val).format('YYYY/MM/DD')) {
					this.curText = 1;// 用于显示今日标记
				}
			}
			if (this.dateCurr === 2) {
				let strs = val.split('-');
				let ts = new Date(strs[0]);
				let dr = new Date(strs[1]);
				startDates = dayjs(ts).startOf('date').format('YYYY-MM-DD HH:mm:ss');
				endDates = dayjs(dr).startOf('date').format('YYYY-MM-DD HH:mm:ss');
				if (this.getWeeks(dayjs().format('YYYY-MM-DD')) == this.getWeeks(dayjs(ts).format('YYYY-MM-DD'))) {
					this.curText = 2;// 用于显示本周标记
				}
			}
			if (this.dateCurr === 3) {
				startDates = dayjs(val).startOf('month').format('YYYY-MM-DD HH:mm:ss');
				endDates = dayjs(val).endOf('month').format('YYYY-MM-DD HH:mm:ss');
				if (dayjs().format('YYYY/MM') == dayjs(val).format('YYYY/MM')) {
					this.curText = 3;// 用于显示本月标记
				}
			}
			// 处理周月不显示仪表盘缺卡信息
			if ((this.dateCurr === 2 || this.dateCurr === 3) && this.signDataArrFour.length > 4) {
				this.signDataArrFour.splice(4,1);
			}
				
			if (!this.findRoute('mystatistics_sign_switch') || !this.singleUserState) {// 维保员周月搜索
				this.initUserData(startDates,endDates);
				return;
			}
			if (this.findRoute('mystatistics_sign_switch') && this.dateCurr > 1) { // 维保组长周月搜索
				this.initGroundData(startDates,endDates);
			}
			if (this.findRoute('mystatistics_sign_switch') && this.dateCurr === 1) { // 维保组长日搜索
				let objs = await this.initRestDayDetail(dayjs(val).format('YYYY-MM-DD'),dayjs(val).format('YYYYMMDD')) || {};
				if (Object.keys(objs).length > 0) {
					if (objs.holiday !== 1) {// 判断不是休息日 加载数据
						this.initGroundDayData(startDates,endDates,objs.holiday);
					}
				}
			}
			if (this.dateCurr === 1) {// 处理仪表盘缺卡显示
				if (this.restDayObj.holiday !== 1 && dayjs().format('YYYY/MM/DD') != dayjs(val).format('YYYY/MM/DD')) {
					// 工作日并且不是当日 显示缺卡数据
					this.signDataArrFour.splice(4,1,{title:'缺卡',titleTo:'',type:'noSignCounts'});
				} else {
					// 工作日并且是当日 不显示缺卡数据
					this.signDataArrFour.splice(4,1);
				}
			}
		},
			
		// 点击日周月选择
		async bindFilter(type,nums) {
			this.dateCurr = nums;
			this.acts = 1;// 默认考勤明细按组显示
			let startDates = '',endDates = '';
			if (nums === 1) {
				this.curText = 1;
				this.dateSelect = dayjs(new Date()).format('YYYY/MM/DD');
				startDates =  dayjs(new Date()).startOf('date').format('YYYY-MM-DD HH:mm:ss');
				endDates =  dayjs(new Date()).endOf('date').format('YYYY-MM-DD HH:mm:ss');
			}
			if (nums === 2) {// 周选择
				this.curText = 2;
				let weeksLists = this.$refs.weekYear.getAllWeekRange(new Date().getFullYear());
				this.weeksLists = weeksLists;
				this.weeksinde = this.$refs.weekYear.getYearWeek(dayjs(new Date()).format('YYYY-MM-DD'));
				let obj = weeksLists.find((item)=>item.value === this.weeksinde) || {};
				if (Object.keys(obj).length > 0) {
					let dateArr = obj.date.replace(/['月','日']/g,'/').split('-');
					this.dateSelect = obj.year + '/' + dateArr[0].substring(0,5) + '-' + obj.year + '/' + dateArr[1].substring(0,5);
					startDates = dayjs(obj.year + '/' + dateArr[0].substring(0,5)).startOf('date').format('YYYY-MM-DD HH:mm:ss');
					endDates =  dayjs(obj.year + '/' + dateArr[1].substring(0,5)).endOf('date').format('YYYY-MM-DD HH:mm:ss');
					console.log('周',obj,dateArr);
				}
			}
			if (nums === 3) {
				this.curText = 3;
				this.dateSelect = dayjs(new Date()).format('YYYY/MM');
				startDates =  dayjs(new Date()).startOf('month').format('YYYY-MM-DD HH:mm:ss');
				endDates =  dayjs(new Date()).endOf('month').format('YYYY-MM-DD HH:mm:ss');
			}
			// 处理周月不显示仪表盘缺卡信息
			if ((nums === 2 || nums === 3) && this.signDataArrFour.length > 4) {
				this.signDataArrFour.splice(4,1);
			}
			if ((nums > 1 && !this.findRoute('mystatistics_sign_switch')) || !this.singleUserState) {// 组员周月数据
				this.initUserData(startDates,endDates);
				return;
			}
				
			if (nums > 1 && this.findRoute('mystatistics_sign_switch')) {// 组长周月数据
				this.initGroundData(startDates,endDates);
			}
				
			if (nums === 1 && this.findRoute('mystatistics_sign_switch')) {// 组长日数据
				let objs = await this.initRestDayDetail(dayjs(new Date()).format('YYYY-MM-DD'),dayjs(new Date()).format('YYYYMMDD')) || {};
				if (Object.keys(objs).length > 0) {
					if (objs.holiday !== 1) {// 判断不是休息日 加载数据
						this.initGroundDayData(startDates,endDates,objs.holiday);
					}
				}
			}
		},
		// formatter(res){
		//    return {
		//     title:'考勤',
		//     subtitle:"出勤"
		//    }
		//   },
		// 日期左右切换
		async tabNext(type) {
			// this.dateSelect = '2020/08/18'
			if (!this.dateSelect) {
				return;	
			}
			this.acts = 1;// 默认考勤明细按组显示
			let tabDate = '';
			let ds = new Date(this.dateSelect);
			let dat = '';
			let startDate = '',endDate = '';
			let daysDate = '';
			this.curText = 4;// 4为空的标记
				
			if (this.dateCurr === 1) {// 日切换
				if (type === -1) {
					dat = new Date(ds.setDate(ds.getDate() - 1));
					tabDate = dayjs(dat).format('YYYY/MM/DD');
				}
				if (type === 1) {
					dat = new Date(ds.setDate(ds.getDate() + 1));
					tabDate = dayjs(dat).format('YYYY/MM/DD');
				}
				startDate = dayjs(dat).startOf('date').format('YYYY-MM-DD HH:mm:ss');
				endDate = dayjs(dat).endOf('date').format('YYYY-MM-DD HH:mm:ss');
				daysDate = dat; // 用于传给休息日接口
					
				if (dayjs(dat).format('YYYY/MM/DD') > dayjs().format('YYYY/MM/DD') ) {
					this.curText = 1;// 用于显示今日标记
					uni.showToast({
						title:'不能大于当前日期',
						icon:'none'
					});
					return;
				}
					
				if (dayjs().format('YYYY/MM/DD') == dayjs(dat).format('YYYY/MM/DD')) {
					this.curText = 1;// 用于显示今日标记
				}
			}
			if (this.dateCurr === 2) {// 周切换
				let dr = new Date(this.dateSelect.split('-')[0]);
				let dt = new Date(this.dateSelect.split('-')[1]);
				let weekDates = '';// 用于判断是否是本周
				if (type === -1) {
					let dUpper = new Date(dr.setDate(dr.getDate() - 7));
					let tUpper = dayjs(dUpper).format('YYYY/MM/DD');
						
					let dOldUpper = new Date(dr.setDate(dr.getDate() + 6));
					let tOldUpper = dayjs(dOldUpper).format('YYYY/MM/DD');
					tabDate = tUpper + '-' + tOldUpper;
					startDate = dayjs(dUpper).format('YYYY-MM-DD HH:mm:ss');
					endDate = dayjs(dOldUpper).format('YYYY-MM-DD HH:mm:ss');
					weekDates = tUpper;
				}
				if (type === 1) {
					let dlower = new Date(dt.setDate(dt.getDate() + 7));
					let tlower = dayjs(dlower).format('YYYY/MM/DD');
					
					let dOldlower = new Date(dt.setDate(dt.getDate() - 6));
					let tOldlower = dayjs(dOldlower).format('YYYY/MM/DD');
					tabDate = tOldlower + '-' + tlower;
					startDate = dayjs(dOldlower).format('YYYY-MM-DD HH:mm:ss');
					endDate = dayjs(dlower).format('YYYY-MM-DD HH:mm:ss');
						
					weekDates = tOldlower;
					if (this.getWeeks(dayjs(weekDates).format('YYYY-MM-DD')) > this.getWeeks(dayjs().format('YYYY-MM-DD'))) {
						this.curText = 2;// 用于显示本周标记
						uni.showToast({
							title:'不能大于当前日期',
							icon:'none'
						});
						return;
					}
				}
				if (this.getWeeks(dayjs().format('YYYY-MM-DD')) == this.getWeeks(dayjs(weekDates).format('YYYY-MM-DD'))) {
					this.curText = 2;// 用于显示本周标记
				}
			}
			if (this.dateCurr === 3) {// 月切换
				ds = new Date(this.dateSelect + '/01');
				if (type === -1) {
					dat = new Date(ds.setMonth(ds.getMonth() - 1));
					tabDate = dayjs(dat).format('YYYY/MM');
				}
				if (type === 1) {
					dat = new Date(ds.setMonth(ds.getMonth() + 1));
					tabDate = dayjs(dat).format('YYYY/MM');
				}
					
				if (type === -1 || type === 1) {
					startDate = dayjs(dat).startOf('month').format('YYYY-MM-DD HH:mm:ss');
					endDate = dayjs(dat).endOf('month').format('YYYY-MM-DD HH:mm:ss');
					if (parseInt(dat.getTime() / 1000) > parseInt(new Date().getTime() / 1000)) {
						this.curText = 3;// 用于显示本周标记
						uni.showToast({
							title:'不能大于当前日期',
							icon:'none'
						});
						return;
					}
					if (dayjs(new Date()).format('YYYY/MM') == dayjs(dat).format('YYYY/MM')) {
						this.curText = 3;// 用于显示本月标记
					}
				}
			}
				
			this.dateSelect = tabDate;
				
			if (!this.findRoute('mystatistics_sign_switch') || !this.singleUserState) {// 维保员周月搜索
				this.initUserData(startDate,endDate);
				return;
			}
			if (this.findRoute('mystatistics_sign_switch') && this.dateCurr > 1) { // 维保组长周月搜索
				this.initGroundData(startDate,endDate);
			}
			if (this.findRoute('mystatistics_sign_switch') && this.dateCurr === 1) { // 维保组长日搜索
				let objs = await this.initRestDayDetail(dayjs(daysDate).format('YYYY-MM-DD'),dayjs(daysDate).format('YYYYMMDD')) || {};
				if (Object.keys(objs).length > 0) {
					if (objs.holiday !== 1) {// 判断不是休息日 加载数据
						this.initGroundDayData(startDate,endDate,objs.holiday);
					}
				}
			}
			if (this.dateCurr === 1) {// 处理仪表盘缺卡显示
				if (this.restDayObj.holiday !== 1 && dayjs().format('YYYY/MM/DD') != dayjs(dat).format('YYYY/MM/DD')) {
					this.signDataArrFour.splice(4,1,{title:'缺卡',titleTo:'',type:'noSignCounts'});
				} else {
					this.signDataArrFour.splice(4,1);
				}
			}
		},
			
		// 出勤排行榜展开收起
		moreOpen(nums) {
			let workArr = [];
			this.workRateListsArrState = true;
			if (nums === 1) {
				this.openState = 2;
				this.workRateListsArr = this.workRateListsArrTwo;
			} else {
				this.openState = 1;
				workArr = JSON.parse(JSON.stringify(this.workRateListsArr));
				this.workRateListsArr = workArr.splice(0,3);
			}
		},
			
		// 跳转
		tabClick(state) {
			let url = '/pageModules/signPage/siginUserList';
			if (state === 2) {
				let ymd = formatTime(new Date().getTime(), '-', true)
					.split(' ')[0]
					.replace(/\-/g, '');
				let month = formatTime(new Date().getTime(), '-', true).split('-')[1];
				var result = month;
				if (Number(month) < 10) {
					result = month.replace('0', '');
				}
				url = '/pageModules/signPage/siginIndex?month=' + result + '&ymd=' + ymd;
			}
			uni.navigateTo({
				url,
			});
		},
		nodeClick(res) {
			console.log('nodedddd',res);
			// const query = uni.createSelectorQuery().in(this);
			// let result = query.select('.head_content')
		},
		// 维保组长初始数据 日
		initGroundDayData(beginDate,endDate,types) {
			uni.showLoading({
				title:'加载中...',
				mask:true,
			});
			getGroundSignDetail({
				  // beginDate,
				  // endDate,
				  searchDate:dayjs(beginDate).format('YYYYMMDD'),
				  userIds:this.initUserIDs,
				  parentId:this.deptIdArr
			}).then((res)=>{
				  const datas = res.data || {};	  
				 
				  if (res.code === 200 ) {
					  uni.hideLoading();
					  this.objSignData = datas;
					  let groupMapArrTree = datas.groupMap; // 工作日 按组数据
					  let userMapArrTree = datas.userMap; // 工作日 按组数据
					  this.listObj = {
						  planUserNames:datas.planUserNames,
						  workUserNames:datas.workUserNames,
					  };
					  
					   if (types !== 1) {// 工作日不显示缺卡和加班数据 按组和按人
						   groupMapArrTree.forEach((item,i,arr)=>{
							   if ((item.signTypeName == '缺卡') && dayjs().format('YYYY/MM/DD') == dayjs(this.dateSelect).format('YYYY/MM/DD')) {
							   	   arr.splice(i,1);
							   }
						   });
						   groupMapArrTree.forEach((item,i,arr)=>{// 不是当前日不显示加班
							   if (item.signTypeName == '加班') {
								   arr.splice(i,1);
							   }
						});
						userMapArrTree.forEach((item,i,arr)=>{
							   if (item.signTypeName == '缺卡' && dayjs().format('YYYY/MM/DD') == dayjs(this.dateSelect).format('YYYY/MM/DD')) {
								   arr.splice(i,1);
							   }
						});
						userMapArrTree.forEach((item,i,arr)=>{
							   if (item.signTypeName == '加班') {
								   arr.splice(i,1);
								   }
						});
					}
					   this.signTreeData = groupMapArrTree; 
					   
					   if (!this.singleGroupState) {// 切换时区分没有子组按人显示
						   this.signTreeData = userMapArrTree;
					   }
					  let signDataArrFour = this.signDataArrFour;
					  for (let pro in datas) {
						for (let i = 0; i < signDataArrFour.length; i++) {// 考勤仪表盘明细数据
						  if (pro == signDataArrFour[i].type) {
								signDataArrFour[i].titleTo = datas[pro];
						  }
						}
					  }
					  let workRateLists = JSON.parse(JSON.stringify(datas.workRateLists || []));
					  
					  for (let i = 0; i < workRateLists.length; i++) {// 处理出勤排行 圆环比显示
						if (workRateLists[i].workRate) {
							workRateLists[i].seriesPlus = {
								series: [
								  {
										color: '#0091ff',
										data: workRateLists[i].workRate
								  }
								]
							};
							workRateLists[i].workRate = (Number(workRateLists[i].workRate) * 100).toFixed(2);
						}
					  }
					  // 出勤排行榜截取显示前3数据
					 this.workRateListsArrTwo =  JSON.parse(JSON.stringify(workRateLists));
					 if (workRateLists.length <= 3 ) {
						 this.workRateListsArr = workRateLists;
						 this.workRateListsArrState = false;
					 } else {
						this.workRateListsArrState = true;
						this.workRateListsArr = workRateLists.splice(0,3);
					 }
					  
					  // 实际出勤人数除于参与考勤人数
					  let nums = (datas.workUserCount || 0) / (datas.planUserCount || 0);
					  let resr = {
						series: [
						  {
								color: '#0091ff',
								data: Number(nums.toFixed(2)) 
						  },
						]
					  };
					  this.d2.chartData = JSON.parse(JSON.stringify(resr));
				  }
			});
			this.$forceUpdate();
		},
		// 维保组长初始数据 周月
		initGroundData(beginDate,endDate) {
			uni.showLoading({
				title:'加载中...',
				mask:true
			});
			getGroundWeekSignDetail({
				  beginDate,
				  endDate,
				  // searchDate:"20220820",
				  userIds:this.initUserIDs,
				  parentId:this.deptIdArr
			}).then((res)=>{
				  const datas = res.data || {};	  
				  if (res.code === 200 ) {
					  uni.hideLoading();
					  this.objSignData = datas;
					  this.signTreeData = datas.groupList;
					  let signDataArrThree = this.signDataArrThree;
					  console.log('周月',datas.groupList, this.signTreeData);
					  
					  if (!this.singleGroupState) {// 切换时区分没有子组按人显示
					  	this.signTreeData = datas.userList;
					  }
					  for (let pro in datas) {
						for (let i = 0; i < signDataArrThree.length; i++) {// 考勤明细数据
						  if (pro == signDataArrThree[i].type) {
								signDataArrThree[i].titleTo = datas[pro];
						  }
						}
					  }
				  }
				  this.$forceUpdate();
			});
		},
			
		// 维保员初始数据
		initUserData(beginDate,endDate) {
			uni.showLoading({
				title:'加载中...',
				mask:true,
			});
			let objs = {
				beginDate,
				endDate,
				userId:this.userinfo.user_id,
				parentId:this.deptIdArr
			};
			if (this.findRoute('mystatistics_sign_switch') && !this.singleUserState) {// 维保组长选个人时id值更改
				objs.userId = this.initUserIDs.join(',');
			}
			getUserSignDetail(objs).then((res)=>{
				  const datas = res.data || {};	  
				  
				  if (res.code === 200 ) {
					  uni.hideLoading();
					  let signDataArr = this.signDataArr;
					  let signDataArrTo = this.signDataArrTo;
					  for (let pro in datas) {
						  for (let i = 0; i < signDataArr.length; i++) {// 维保员统计数据
							  if (pro == signDataArr[i].type) {
								signDataArr[i].count = datas[pro];
							  }
						  }
						  for (let i = 0; i < signDataArrTo.length; i++) {// 维保员考勤明细数据
							  if (pro == signDataArrTo[i].type) {// 子级数组
								signDataArrTo[i].signArr = datas[pro] || [];
							  }
							  if (pro == signDataArrTo[i].haveTwo) {// 分钟
							  	// signDataArrTo[i].titleTo = "共"+datas[pro]+"分钟"
							  	signDataArrTo[i].titleTo = '共' + formatSeconds(datas[pro] * 60,1,true);
								// if(signDataArrTo[i].haveTwo == 'workOverHours'){//
								// 	// signDataArrTo[i].titleTo = "共"+datas[pro]+"小时"
								// 	signDataArrTo[i].titleTo = "共"+formatSeconds(datas[pro]*60,1)
								// }
							  }
							  if (pro == signDataArrTo[i].have) {// 次数
								signDataArrTo[i].titleCount = datas[pro];
							  }
						  }
					  }
					  this.$forceUpdate();
				  }
			});
		},
		// 获取休息日 日搜索时调用这个接口先判断是不是休息日
		initRestDayDetail(date,searchDate) {
			uni.showLoading({
				title:'加载中...',
				mask:true,
			});
			return new Promise((resolve,reject)=>{
				getRestDayDetail({
					date:date + ' 00:00:00',
						 parentId:this.deptIdArr,
				}).then(res=>{
					const datas = res.data || {};
					console.log('休息',res);
					this.restDayObj = datas;
					if (res.code === 200 ) {
						uni.hideLoading();
						resolve(datas);
						if (datas.holiday === 1) {// 休息日
							uni.showLoading({
								title:'加载中...',
								mask:true,
							});
							getRestDayTotal({// 获取休息日统计
								searchDate,
								userIds:this.initUserIDs,
									 parentId:this.deptIdArr,
							}).then(datar=>{
								const resData = datar.data || {};
								if (datar.code === 200 ) {
									uni.hideLoading();
									this.objSignData = resData;
									this.signTreeData = [resData.groupSign || {}];
										
									if (!this.singleGroupState) {// 切换时区分没有子组按人显示
										this.signTreeData = [resData.userSign || {}];
									}
								}
								console.log('休息统计',datar,this.objSignData);
							});
						}
					}
				}).catch(err=>reject({}));
			});
		},
		// 获取休息日统计
			
		// initRestDayTotal(searchDate){
		// 	return new Promise((resolve,reject)=>{
		// 		getRestDayTotal({
		// 			searchDate,
		// 			userIds:['1402066787146182658','1435853235343110146','1450658620520312834'],
		// 		}).then(datar=>{
		// 			let resData = datar.data || {}
						
		// 			if(datar.code === 200 ){
		// 				this.objSignData = resData
		// 				this.signTreeData = [resData.groupSign]
		// 			}
		// 			// resolve(resData)
		// 			console.log("休息统计",datar,this.signTreeData)
		// 		})
		// 	})
				
		// },
			
		getWeeks(now) {
			if (now) {
				var today = new Date(now);
				var firstday = new Date();  // 该年的第一天
				var year = now.slice(0, now.indexOf('-'));
				firstday.setYear(year);
				firstday.setMonth(0);
				firstday.setDate(1);  // 设置成这年的一月一号
				var timing = today - firstday;
				var days = Math.ceil(timing / (24 * 60 * 60 * 1000));  // 距离第一天共有多少天
				days += firstday.getDay() + 1;  // 假如今年一月一号是星期三，第一周就已经过去了三天，加上西方认为星期天是一周的第一天
				var weeks = Math.ceil(days / 7);  // 获得周数
				// console.log(today, firstday, days, weeks);
				return weeks;
			}
		}
		
	}
};
</script>

<style lang="scss" scoped>
	
	%widthMargin {width: 720rpx;margin: 0 auto;};
	// @include fontColors(24rpx,400,#ffffff);
	@mixin fontColors($px,$count,$colour) {
		font-size: $px;
		font-weight: $count;
		color: $colour;
	}
	.allEmpty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;
		image {
			width: 64rpx;
			height: 64rpx;
		}
	}
	.wrapper_All{
		min-height: 100vh;
		background-color: #f0f0f0;
		@extend %widthMargin;
	}
	// /deep/ .uni-collapse-item__title .uni-collapse-item-border:last-child{
	// 	border-bottom: none;
	// }
	// .uni-collapse-item:last-child .uni-collapse-item__title:last-child .uni-collapse-item-border:last-child{
	// 	border-bottom: none;
	// }
	.uni-collapse-item .uni-collapse-item__title-arrow{
		margin-right: 0;
	}
	.uni-collapse-item .uni-collapse-item__title-arrow .uni-icons{
		    font-size: 32rpx;
	} 
	.wrapper_total{
		
		.topTitle{
			border-radius: 8rpx;
			background: #fff;
			.roleBox {
				margin: 16rpx 0rpx;
				padding: 14rpx 20rpx 14rpx 0;
				background: #fff;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.roleCard {
					border-left: 4rpx solid #0091ff;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					flex: 1;
					text{
						margin-left: 5rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999;
					}
				}
				.changeBtn {
					color: #0091ff;
					font-size: 24rpx;
					display: flex;
					flex: 0 0 200rpx;
					justify-content: flex-end;
					image {
						width: 32rpx;
						height: 32rpx;
					}
					
				}
			}
			.weekDate{
				height: 52rpx;
				width: 662rpx;
				background: #f3f6f8;
				display: flex;
				justify-content: center;
				margin: 0 auto;
				border-radius: 8rpx;
				view{
					 @include fontColors(24rpx,400,#333333);
					 text-align: center;
					 width: 166rpx;
					 height: 44rpx;
					 line-height: 44rpx;
				}
				.act{
					border-radius: 8rpx;
					text-align: center;
					margin-right: 20rpx;
					width: 166rpx;
					height: 44rpx;
					line-height: 44rpx;
					background: #eef8ff;
					border: 2rpx solid #0091ff;
					color:#0091ff;
				}
			}
			.tabDate{
				height: 52rpx;
				width: 662rpx;
				display: flex;
				margin: 0rpx auto;
				padding: 20rpx 0;
				line-height: 52rpx;
				.down{
					flex: 0 0 70rpx;
					
					text{
						display: inline-block;
						width: 16rpx;
						height: 16rpx;
						border-left: 2rpx #0091FF solid;
						border-bottom: 2rpx #0091FF solid;
						transform: rotate(45deg);
						margin-left: 10rpx;
					}
				}
				.dates{
					flex: 1;
					text-align: center;
					color: #0091ff;
					font-size: 28rpx;
					font-weight: 600;
					color: #0091ff;
					display: flex;
					justify-content: center;
					align-items: center;
					text{
						display: inline-block;
						width: 52rpx;
						height: 28rpx;
						background: #f3f6f8;
						font-size: 20rpx;
						font-weight: 400;
						color: #0091ff;
						line-height: 28rpx;
						margin: 0 0 0 5rpx;
					}
				}
				.next{
					flex: 0 0 70rpx;
					text-align: right;
					
					text{
						display: inline-block;
						width: 16rpx;
						height: 16rpx;
						border-right: 2rpx #0091FF solid;
						border-bottom: 2rpx #0091FF solid;
						transform: rotate(-45deg);
						margin-right: 10rpx;
						
					}
				}
			}
		}
		
		.workdata{
			background: #ffffff;
			border-radius: 8rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 16rpx;
			.items{
				width: 164rpx;
				height: 134rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position:relative;
				text:nth-of-type(1){
					display: inline-block;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
				}
				text:nth-of-type(2){
					display: block;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
				}
				.lines{
					height: 60rpx;
					width: 2rpx;
					border-right: 2rpx #eeeeee solid;
					position: absolute;
					top: 40rpx;
					right: 0;
				}
			}
			.itemsPlus{
				flex: 1;
			}
			.itemsWeek{
				width: 236rpx;
			}
			.itemsDay{
				width: 178rpx;
			}
		}
		.workdataPlus{
			background: #ffffff;
			border-radius: 8rpx;
			display: flex;
			.itemsPlus{
				flex: 1;
				height: 134rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position:relative;
				text:nth-of-type(1){
					display: inline-block;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
				}
				text:nth-of-type(2){
					display: block;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
				}
				.lines{
					height: 60rpx;
					width: 2rpx;
					border-right: 2rpx #CCCCCC solid;
					position: absolute;
					top: 40rpx;
					right: 0;
				}
			}
		}
		
		.dateEmpty{
			background: #f0f0f0;
			text-align: center;
			@include fontColors(22rpx,400,#999999);
			margin: 10rpx 0;
		}
		.dateRest{
			height: 330rpx;
			margin-top: 16rpx;
			background: #ffffff;
			border-radius: 8rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			.reset_up{
				margin-top: 50rpx;
				image{
					width: 64rpx;
					height: 60rpx;
					margin-bottom: 15rpx;
				}
				text{
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					display: block;
				}
			}
			.reset_down{
				margin-top: 40rpx;
				.down_one{
					display: block;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					text{
						font-size: 26rpx;
						font-weight: 400;
						color: #999999;
					}
				}
				.down_two{
					display: block;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.workPerson{
			background: #ffffff;
			border-radius: 8rpx;
			margin-top: 16rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			.attendants{
				position: absolute;
				top: 20rpx;
				right:32rpx;
				// text-align: right;
				// margin-right: 32rpx;
				text:nth-of-type(1){
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
				text:nth-of-type(2){
					display: inline-block;
					margin-left: 8rpx;
					width: 12rpx;
					height: 12rpx;
					border-right: 2rpx #d8ded8 solid;
					border-top: 2rpx #d8d8d8 solid;
					transform: rotate(45deg);
				}
			}
			.w-Person{
				height: 350rpx;
				width:100%;
				margin-top: 70rpx;
				position: relative;
				
				.titData{
				  position: absolute;
				  top: 92rpx;
				  left: 36%;
				  display: flex;
				  .tit_left,.tit_right{
					  text-align: center;
						text:nth-of-type(1){
							display: block;
							font-size: 26rpx;
							font-weight: 400;
							color: #999999;
						}
						text:nth-of-type(2){
							display: inline-block;
							font-size: 36rpx;
							font-weight: 500;
							color: #333333;
						}
						text:nth-of-type(3){
							display: inline-block;
							font-size: 22rpx;
							font-weight: 400;
							color: #333333;
							margin-left: 8rpx;
						}
				  }
				  .tit_lines{
					  border-left: 2rpx #CCCCCC solid;
					  height: 50rpx;
					  margin: 10rpx 20rpx;
				  }
				  
				}
			}
		}
		.signInfo{
			margin-top: 16rpx;
			background: #ffffff;
			border-radius: 8rpx;
			.info_title{
				padding: 20rpx 20rpx 10rpx;
				 @include fontColors(32rpx,500,#333333);
			}
			.info_select{
				margin-left: 20rpx;
				display: flex;
				.sGround{
					 @include fontColors(24rpx,400,#999999);
					 margin-right: 30rpx;
				}
				.acts{
					 @include fontColors(24rpx,500,#333333);
					  padding-bottom: 5rpx;
					  border-bottom: 2rpx #333333 solid;
				}
				// .sPerson{
				// 	 @include fontColors(24rpx,400,#999999);
				// }
			}
		}
		.collapses{
			margin:0 20rpx;
			padding-bottom: 10rpx;
			.collTitle{
				margin: 20rpx 0;
				display: flex;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				view:nth-of-type(1){
					flex: 1;
					text:nth-of-type(1){
						display: inline-block;
						border-width: 12rpx;
						border: 2rpx #0091FF solid;
						height: 20rpx;
					}
					text:nth-of-type(2){
						display: inline-block;
						margin-left: 20rpx;
						
					}
				}
				view:nth-of-type(2){
					flex: 1;
					margin-right: 20rpx;
					text-align: right;
					margin-right: 20rpx;
				}
				
			}
			.content{
				background: #f6f6f6;
				border-radius: 4rpx;
				margin: 20rpx 0rpx;
				max-height: 500rpx;
				overflow-y: scroll;
			}
			.contents{
				display: flex;
				font-size: 24rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-weight: 400;
				padding: 0 20rpx;
				color: #666666;
				view:nth-of-type(1){
					flex: 1; 
				}
				view:nth-of-type(2){
					flex: 1;
					text-align: right;
				}
			}
		}
		
		.ranking{
			margin-top: 16rpx;
			background: #ffffff;
			border-radius: 8rpx;
			.ranking_title{
				padding: 20rpx;
				@include fontColors(32rpx,500,#333333);
			}
			.ranking_content{
				margin: 0 20rpx;
				.r-table{
					// display: flex;
					// flex-direction: column;
					.r-th{
						display: flex;
						flex-direction: row;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						
						.th:nth-of-type(1){
							flex: 0 0 120rpx;
						}
						.th:nth-of-type(2){
							flex: 1;
							width: 320rpx;
						}
						.th:nth-of-type(3){
							flex: 0 0 172rpx;
							text-align: center;
						}
						.th:nth-of-type(4){
							flex: 0 0 100rpx;
							text-align: right;
						}
					}
					.r-tr{
						display: flex;
						flex-direction: row;
						padding: 20rpx 0;
						border-bottom: 2rpx #e9e9e9 solid;
						height: 72rpx;
						line-height: 72rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						
						.td:nth-of-type(1){
							flex: 0 0 120rpx;
							width: 120rpx;
							height: 82rpx;
							
						}
						.td:nth-of-type(2){
							flex: 1;
							width: 320rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.td:nth-of-type(3){
							flex: 0 0 172rpx;
							text-align: center;
						}
						.td:nth-of-type(4){
							text-align: right;
							flex: 0 0 100rpx;
						}
					}
					.r-tr:last-child{
						border-bottom: none;
					}
					.td_Empty{
						height: 200rpx;
						text-align: center;
						line-height: 200rpx;
						@include fontColors(26rpx,400,#999999);
					}
				}
				.r-more{
					display: flex;
					justify-content: center;
					align-items: center;
					height: 70rpx;
					vertical-align: middle;
					border-top: 2rpx #e9e9e9 solid;
					@include fontColors(24rpx,400,#999);
					image{
						vertical-align: middle;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
		
	}

</style>
